<template>
  <!-- 弹框 -->
  <el-dialog
    :title="`${title}学科`"
    :visible.sync="dialogShow"
    width="40%"
    @close="btnCancel"
  >
    <el-form
      :model="formData"
      ref="form"
      :rules="formRules"
      label-width="160px"
      size="samll"
    >
      <el-form-item label="学科名称" prop="subject_name">
        <el-input
          v-model="formData.subject_name"
          placeholder="请输入学科名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="formData.sort"
          :min="1"
          :max="1000"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="是否显示" prop="is_show">
        <el-switch
          v-model="formData.is_show"
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="学科图标">
        <el-upload
          class="avatar-uploader"
          :on-progress="handleFileUploadProgress"
          :headers="headers"
          action="http://124.223.14.236:7005/admin/index/upload?mode=single&type=image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon tool-bar"></i>
        </el-upload>
        <span>建议200*200</span>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="dialogShow = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addSubjectApi, showSubjectApi, editSubjectApi, } from '@/api/discipline'
import { getToken } from '@/utils/auth'
export default {
  name: 'DisciplinePop',
  data() {

    return {
      isUploading: false,
      headers: { Authorization: "Bearer " + getToken() },
      imageUrl: '',
      // 弹框控制变量
      dialogShow: false,
      // 表单数据变量
      formData: {
        subject_name: '',
        sort: 10,
        subject_icon: '',
        is_show: 1
      },
      // 
      formRules: {
        subject_name: [{ required: true, message: '请输入', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入', trigger: '' }],
        is_show: [{ required: true, message: '请输入', trigger: 'change' }]
      }

    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '创建'
    }
  },
  methods: {
    // 回显数据
    async reviewInfo(id) {
      console.log(id);
      let res = await showSubjectApi(id)
      console.log(res);
      // this.imageUrl = this.imgUrl + res.subject_icon
      this.imageUrl = 'http://124.223.14.236:7005/' + res.subject_icon
      // http://124.223.14.236:7005/
      console.log(this.imgUrl);

      this.formData = res
      this.dialogShow = true
    },
    // handleChange() { },
    // 提交
    async btnOk() {
      // 1校验表单
      await this.$refs.form.validate()
      // 2加工数据
      // 3发送请求
      this.formData.id ? await editSubjectApi(this.formData) : await addSubjectApi(this.formData)
      //4 提示成功
      this.$message.success(this.formData.id ? '修改成功' : '创建成功')
      // 5关闭弹框和
      this.dialogShow = false
      //6 更新列表
      this.$emit('updateList')
      // 表单重置
      this.btnCancel()

    },
    // 取消
    async btnCancel() {
      // 表单重置
      this.formData = {
        subject_name: '',
        sort: 10,
        subject_icon: '',
        is_show: 1
      }
      this.$refs.form.clearValidate()
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.isUploading = true;
    },
    // 上传图片

    handleAvatarSuccess(res, file) {
      this.isUploading = false;
      console.log(res, file);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.formData.subject_icon = res.data.url
      // this.imageUrl = 'http://124.223.14.236:7005/admin/' + res.data.url

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.containter-box {
  padding: 30px;
}
.creat-xk {
  float: right;
}
.filter-form,
.tool-bar {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
}
.subject_img {
  height: 40px;
  width: 40px;
}
.image__inner {
  width: 100%;
  height: 100%;
}
/* 上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>